import React,{useState} from 'react';
import {Link,Outlet,useNavigate} from "react-router-dom";

export default function Message() {
    const [messages]=useState([
        {id:"001",title:"消息1",content:"锄禾日当午"},
        {id:"002",title:"消息2",content:"汗滴禾下土"},
        {id:"003",title:"消息3",content:"谁知盘中餐"},
        {id:"004",title:"消息4",content:"粒粒皆辛苦"}
    ]);
    const navigate=useNavigate();
    function tiaozhuan(item){
        navigate("detail",{
            state:{
                id:item.id,
                title:item.title,
                content:item.content
            }
        });
    };
    return (
        <div>
            {
                messages.map((item)=>{
                    return (
                        // params传参
                        // <Link to={`detail/${item.id}/${item.title}/${item.content}`} key={item.id}>{item.title}</Link>

                        // search传参
                        // <Link to={`detail?id=${item.id}&title=${item.title}&content=${item.content}`} key={item.id}>{item.title}</Link>

                        // state传参
                        <div key={item.id}>
                            <Link to="detail" 
                                state={
                                    {
                                        id:item.id,
                                        title:item.title,
                                        content:item.content
                                    }
                                }
                            >{item.title}</Link>
                            <button onClick={()=>{return tiaozhuan(item)}}>点击跳转</button>
                        </div>
                    )
                })
            }
            <Outlet></Outlet>
        </div>
    )
}
